<template>
  <div class="indexMainChiefSubject">
    <div class="indexMainChiefSwipeMian">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="red">
        <van-swipe-item v-for="item in indexMainChiefSwipeList" :key="item.id"
          ><img :src="item.imgPath" alt="" @click="toComicInfo(item.id)"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="indexMainChiefMenuMian">
      <div @click="toComicClassify()">
        <van-icon name="apps-o" />
        <p>分类</p>
      </div>
      <div @click="toComicResult('kind', '排行', '1')">
        <van-icon name="bar-chart-o" />
        <p>排行</p>
      </div>
      <div>
        <van-icon
          name="star"
          @click="toComicCellPage('collection', '我的收藏')"
        />
        <p>收藏</p>
      </div>
      <div>
        <van-icon
          name="clock-o"
          @click="toComicCellPage('history', '历史记录')"
        />
        <p>历史</p>
      </div>
    </div>
    <div class="indexMainTopTitle">
      <font class="title">TOP排行榜</font>
    </div>
    <div class="indexMainTopMain">
      <div class="indexMainTopAll">
        <div
          v-for="(item, index) in indexMainTopList"
          :key="index"
          :class="['indexMainTopItem', { borderStyle: index !== 0 }]"
        >
          <index-main-top-com :topObject="item"></index-main-top-com>
        </div>
      </div>
    </div>
    <div class="indexMainChiefRecentUpdateTitle">
      <font class="title">最近更新/强力推荐</font>
      <font class="more" @click="toComicResult('kind', '强力推荐', '1')"
        >更多<van-icon name="arrow"
      /></font>
    </div>
    <div class="indexMainChiefRecentUpdateMain">
      <van-swipe
        :show-indicators="false"
        :loop="false"
        :width="indexMainChiefRecentUpdateWidth"
      >
        <van-swipe-item v-for="(item, index) in 4" :key="index"
          ><recent-updates-item-com
            :comicList="
              index % 2 == 0
                ? indexMainChiefRecentUpdateSwipeList[0]
                : indexMainChiefRecentUpdateSwipeList[1]
            "
          ></recent-updates-item-com
        ></van-swipe-item>
      </van-swipe>
    </div>
    <div class="longSingleSwiperTitle">
      <font class="title">火热上升</font>
      <font class="more" @click="toComicResult('kind', '火热上升', '1')"
        >更多<van-icon name="arrow"
      /></font>
    </div>
    <div class="longSingleSwiperMain">
      <swiper-slide-overflow-com
        :comicList="vipList"
      ></swiper-slide-overflow-com>
    </div>
    <div class="longSingleSwiperTitle">
      <font class="title">vip</font>
      <font class="more" @click="toComicResult('kind', 'vip', '1')"
        >更多<van-icon name="arrow"
      /></font>
    </div>
    <div class="longSingleSwiperMain">
      <swiper-slide-overflow-com
        :comicList="vipList"
      ></swiper-slide-overflow-com>
    </div>
  </div>
</template>
<script>
import RecentUpdatesItemCom from '../../components/RecentUpdatesItemCom';
import IndexMainTopCom from '../../components/IndexMainTopCom';
import SwiperSlideOverflowCom from '../../components/SwiperSlideOverflowCom';
export default {
  components: {
    RecentUpdatesItemCom,
    IndexMainTopCom,
    SwiperSlideOverflowCom
  },
  data () {
    return {
      indexMainChiefSwipeList: [
        { id: '1', imgPath: require('../../assets/img/swipePhoto/001.jpg') },
        { id: '2', imgPath: require('../../assets/img/swipePhoto/002.jpg') },
        { id: '3', imgPath: require('../../assets/img/swipePhoto/003.jpg') },
        { id: '4', imgPath: require('../../assets/img/swipePhoto/004.jpg') }
      ],
      indexMainChiefRecentUpdateSwipeList: [
        [
          { id: '1', imgPath: require('../../assets/img/indexMainChiefRecentUpdatePhoto/001.jpg'), title: '山海逆战', content: '山海世界，人与异兽谁胜谁负！', href: '#' },
          { id: '2', imgPath: require('../../assets/img/indexMainChiefRecentUpdatePhoto/002.jpg'), title: '外星人 饲养手册', content: '地球少年……踏上宇宙霸主之路…...', href: '#' },
          { id: '3', imgPath: require('../../assets/img/indexMainChiefRecentUpdatePhoto/003.jpg'), title: '炎黄演义', content: '黄龙转世程亦辰挽救了地狱陨落人...', href: '#' },
          { id: '4', imgPath: require('../../assets/img/indexMainChiefRecentUpdatePhoto/004.jpg'), title: '弃妃逆袭', content: '传说顾倾城曾是永君王妃，被休下...', href: '#' }
        ],
        [
          { id: '5', imgPath: require('../../assets/img/indexMainChiefRecentUpdatePhoto/005.jpg'), title: '极品辣妈不好惹', content: '他是权倾天下的军权继承人，一场...', href: '#' },
          { id: '6', imgPath: require('../../assets/img/indexMainChiefRecentUpdatePhoto/006.jpg'), title: '王爷不能撩', content: '这个王爷不能碰啊！', href: '#' },
          { id: '7', imgPath: require('../../assets/img/indexMainChiefRecentUpdatePhoto/007.jpg'), title: '降神之伞', content: '【首发/每周三、六更新】初中生...', href: '#' },
          { id: '8', imgPath: require('../../assets/img/indexMainChiefRecentUpdatePhoto/008.jpg'), title: '神武天尊', content: '我自虚空而来，举手诸天崩碎，覆...', href: '#' }
        ]

      ],
      indexMainChiefRecentUpdateWidth: '',
      indexMainTopList: [
        {
          topName: '年榜',
          comicList: [
            { id: '1', imgPath: require('../../assets/img/topPhoto/001.jpg'), title: '好比是最终迷宫前的少', content: '好比是最终迷宫前的少年到新手村...', href: '#' },
            { id: '2', imgPath: require('../../assets/img/topPhoto/002.jpg'), title: '反派大小姐于第二次的', content: '我要成为皇帝！', href: '#' },
            { id: '3', imgPath: require('../../assets/img/topPhoto/003.jpg'), title: '弥留之国的爱丽丝 RET', content: '令人战栗的生存悬疑游戏，超越时...', href: '#' },
            { id: '4', imgPath: require('../../assets/img/topPhoto/004.jpg'), title: '嫁入狼族~异种婚姻谭~', content: '兔族正经历着艰难的灾荒，整个村...', href: '#' },
            { id: '5', imgPath: require('../../assets/img/topPhoto/005.jpg'), title: '败给勇者的魔王为了东', content: '暴虐无道的阿古尼尹的魔王被勇者...', href: '#' },
            { id: '6', imgPath: require('../../assets/img/topPhoto/006.jpg'), title: '死亡便利店～100天后', content: '夭寿啊，店长变成丧尸了，谁来给...', href: '#' }
          ]
        },
        {
          topName: '月榜',
          comicList: [
            { id: '1', imgPath: require('../../assets/img/topPhoto/007.jpg'), title: 'Lady Baby', content: '前世的卡利歐佩，歷經家人慘死、...', href: '#' },
            { id: '2', imgPath: require('../../assets/img/topPhoto/008.jpg'), title: '葬送的芙莉莲 ', content: '打倒魔王“之后”的勇者一行人中...', href: '#' },
            { id: '3', imgPath: require('../../assets/img/topPhoto/009.jpg'), title: '拂晓的尤娜', content: '爱恨缠绵的三角，或多角……', href: '#' },
            { id: '4', imgPath: require('../../assets/img/topPhoto/010.jpg'), title: '久保同学不放过我', content: '人都忽视了你，我也能将你找出来...', href: '#' },
            { id: '5', imgPath: require('../../assets/img/topPhoto/011.jpg'), title: '正太贤者失业后', content: '被上天赐予“贤者”印记的少年·...', href: '#' },
            { id: '6', imgPath: require('../../assets/img/topPhoto/012.jpg'), title: '刃牙外传 烈海王对于', content: '刃牙外传 烈海王对于转生异世界...', href: '#' }
          ]
        },
        {
          topName: '周榜',
          comicList: [
            { id: '1', imgPath: require('../../assets/img/topPhoto/001.jpg'), title: '好比是最终迷宫前的少', content: '好比是最终迷宫前的少年到新手村...', href: '#' },
            { id: '2', imgPath: require('../../assets/img/topPhoto/002.jpg'), title: '反派大小姐于第二次的', content: '我要成为皇帝！', href: '#' },
            { id: '3', imgPath: require('../../assets/img/topPhoto/003.jpg'), title: '弥留之国的爱丽丝 RET', content: '令人战栗的生存悬疑游戏，超越时...', href: '#' },
            { id: '4', imgPath: require('../../assets/img/topPhoto/004.jpg'), title: '嫁入狼族~异种婚姻谭~', content: '兔族正经历着艰难的灾荒，整个村...', href: '#' },
            { id: '5', imgPath: require('../../assets/img/topPhoto/005.jpg'), title: '败给勇者的魔王为了东', content: '暴虐无道的阿古尼尹的魔王被勇者...', href: '#' },
            { id: '6', imgPath: require('../../assets/img/topPhoto/006.jpg'), title: '死亡便利店～100天后', content: '夭寿啊，店长变成丧尸了，谁来给...', href: '#' }
          ]
        },
        {
          topName: '日榜',
          comicList: [
            { id: '1', imgPath: require('../../assets/img/topPhoto/007.jpg'), title: 'Lady Baby', content: '前世的卡利歐佩，歷經家人慘死、...', href: '#' },
            { id: '2', imgPath: require('../../assets/img/topPhoto/008.jpg'), title: '葬送的芙莉莲 ', content: '打倒魔王“之后”的勇者一行人中...', href: '#' },
            { id: '3', imgPath: require('../../assets/img/topPhoto/009.jpg'), title: '拂晓的尤娜', content: '爱恨缠绵的三角，或多角……', href: '#' },
            { id: '4', imgPath: require('../../assets/img/topPhoto/010.jpg'), title: '久保同学不放过我', content: '人都忽视了你，我也能将你找出来...', href: '#' },
            { id: '5', imgPath: require('../../assets/img/topPhoto/011.jpg'), title: '正太贤者失业后', content: '被上天赐予“贤者”印记的少年·...', href: '#' },
            { id: '6', imgPath: require('../../assets/img/topPhoto/012.jpg'), title: '刃牙外传 烈海王对于', content: '刃牙外传 烈海王对于转生异世界...', href: '#' }
          ]
        }


      ],
      vipList: [
        { chapter: '最新 第12话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/63/62312/20200821152720_180x240_28.jpg', title: '堂岛同学毫不动摇' },
        { chapter: '最新 第4话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/58/57433/20200210223320_180x240_25.jpg', title: '魔术师们的混乱' },
        { chapter: '最新 第13话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/66/65265/20201224183554_180x240_17.jpg', title: 'Juveniles少年' },
        { chapter: '最新 第114话', groupName: 'vip', imgPath: 'http://mhfm2tel.cdndm5.com/51/50721/20190920114355_180x240_22.jpg', title: 'BLUE LOCK' },
        { chapter: '最新 第19话', groupName: 'vip', imgPath: 'http://mhfm4tel.cdndm5.com/62/61412/20200718102701_180x240_21.jpg', title: 'ABO!!你喜欢哪种类型' },
        { chapter: '最新 第477.2话', groupName: 'vip', imgPath: 'http://mhfm6tel.cdndm5.com/18/17898/20190801205321_180x240_31.jpg', title: '女仆长的每一天' },
        { chapter: '完结 第14话', groupName: 'vip', imgPath: 'http://mhfm4tel.cdndm5.com/23/22834/20160513094128_180x240_22.jpg', title: '感染她嘴唇的欲望' },
        { chapter: '最新 第9话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/54/53330/20190908233915_180x240_27.jpg', title: '如何抓住饿肚子上司的' },
        { chapter: '最新 第2话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/66/65483/20201226205230_180x240_23.jpg', title: '恋爱魅魔的不妙情况' }
      ]
    };
  },
  created () {
    this.indexMainChiefRecentUpdateWidth = (document.body.clientWidth) * 0.95;
  },
  methods: {
    toComicResult (distinguish, kind, identification) {
      console.log(distinguish);
      console.log(kind);
      this.$router.push({
        path: '/comicResult',
        query: {
          kind: kind,
          distinguish: distinguish,
          identification: identification
        }
      });
    },
    toComicClassify () {
      this.$router.push({
        path: '/comicClassify'
      });
    },
    toComicInfo (value) {
      this.$router.push({
        path: '/comicInfo',
        query: {
          id: value
        }

      });
    },
    toComicCellPage (distinguish, pageName) {
      this.$router.push({
        path: '/comicCellPage',
        query: {
          distinguish: distinguish,
          pageName: pageName
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.indexMainChiefSubject {
  height: 100%;
  width: 100%;
  background: #f8f8f8;
  overflow: auto;
}
.indexMainChiefSubject .indexMainChiefSwipeMian {
  height: 164px;
  width: 100%;
  .van-swipe {
    height: 100%;
    img {
      width: 100%;
    }
    /deep/ .van-swipe__indicators {
      .van-swipe__indicator {
        height: 10px;
        width: 10px;
        margin-right: 5px;
        background-color: #d9d9d9;
      }
      .van-swipe__indicator--active {
        width: 20px;
        border-radius: 5px;
      }
    }
  }
}
.indexMainChiefSubject .indexMainChiefMenuMian {
  width: 100%;
  height: 57px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  div {
    height: 100%;
    width: 90px;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .van-icon {
      font-size: 24px;
    }
    p {
      font-size: 15px;
      font-weight: bold;
      margin-right: 2px;
    }
  }
}
.indexMainChiefSubject .indexMainTopTitle {
  width: 100%;
  height: 40px;
  background-color: white;
  display: flex;
  align-items: center;
  margin-top: 10px;
  .title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 5px;
  }
}
.indexMainChiefSubject .indexMainTopMain {
  width: 100%;
  height: 485px;
  background-color: #ffffff;
  overflow: auto;
  .indexMainTopAll {
    width: 1100px;
    height: 100%;
    display: flex;
    justify-content: space-around;

    .indexMainTopItem {
      width: 270px;
      height: 100%;

      float: left;
    }
    .borderStyle {
      border-left: 1px dashed #a7a7a7;
    }
  }
}

.indexMainChiefSubject .indexMainChiefRecentUpdateTitle {
  width: 100%;
  height: 40px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  .title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 5px;
  }

  .more {
    font-size: 15px;
    /deep/ i {
      position: relative;
      top: 2px;
    }
  }
}
.indexMainChiefSubject .indexMainChiefRecentUpdateMain {
  width: 100%;
  height: 361px;
  background-color: #ffffff;
  margin-top: 3px;
  /deep/ .van-swipe {
    width: 100%;
    height: 100%;
    .van-swipe__track {
      // transform: translateX(-360px) !important;
      width: 100% !important;
      .van-swipe-item {
        width: 95% !important;
      }
    }
  }
}
.indexMainChiefSubject .longSingleSwiperTitle {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 18px;
    font-weight: bold;
    margin-left: 5px;
  }

  color: black;
  font-size: 15px;
  .more {
    i {
      position: relative;
      top: 2px;
    }
  }
}
.indexMainChiefSubject .longSingleSwiperMain {
  width: 100%;
  height: 190px;
  background-color: #ffffff;
}
</style>
